<template>
  <div>
    <el-card>
      <el-breadcrumb separator="/" separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/home' }">{{
          $t("home")
        }}</el-breadcrumb-item>
        <el-breadcrumb-item>{{ $t("paysetting") }}</el-breadcrumb-item>
      </el-breadcrumb></el-card
    >
    <el-card class="box-card" style="text-align: center">
      <div class="p-block">
        <el-image class="image" :src="srcr">
          <div v-show="srcr ? 'false' : 'true'" slot="error" class="image-slot">
            <i class="el-icon-picture-outline"></i>
          </div>
        </el-image>
      </div>
      <div style="width: 50%; margin: 0 auto; display: flex">
        <el-input placeholder="" v-model="link" :disabled="true"></el-input
        ><el-button type="info" @click="onCopy">复制</el-button>
      </div>
      <div class="mar-t-b">
        <el-form label-width="100px" style="margin: 0 auto; width: 40rem">
          <el-form-item class="marfom" label="设置二维码">
            <div class="input-button-wrapper">
              <el-input v-model="qrUrl" style="width: 30rem"></el-input>
              <el-button
                @click="generateQRCode"
                style="margin-left: 1rem"
                type="primary"
                >确定</el-button
              >
            </div>
          </el-form-item>
        </el-form>
      </div>
    </el-card>
  </div>
</template>

<script>
import { generateQRCode, getQRCode } from "@/api/payment";
export default {
  data() {
    return {
      srcr: this.getCookie("srcr"),
      qrUrl: this.getCookie("qrUrl"),
      link: "",
    };
  },
  mounted() {
    // 尝试从 cookie 恢复 qrUrl 的值
    //  const savedQRUrl = this.getCookie('qrUrl');
    //  console.log(savedQRUrl);
    // if (savedQRUrl) {
    //   this.srcr = savedQRUrl;
    // } else {
    //   // 如果 cookie 中没有保存的 qrUrl，则生成新的 qrUrl
    //   this.generateQRCode();
    // }
    this.getQRCode();
  },
  methods: {
    onCopy() {
      navigator.clipboard.writeText(this.link).then(() => {
        this.$message.success("复制成功");
      });
    },
    async getQRCode() {
      const res = await getQRCode();
      this.srcr = "data:image/png;base64," + res.data.qrcode;
      this.link = res.data.qrData;
    },
    async generateQRCode() {
      const res = await generateQRCode(this.qrUrl);

      this.srcr = "data:image/png;base64," + res.data.qrcode;

      this.setCookie("qrUrl", this.qrUrl, 7); // 7天过期，可以根据需求调整
      this.setCookie("srcr", encodeURIComponent(this.srcr), 7);
      this.link = ""
      this.getQRCode()
    },
    setCookie(name, value, days) {
      const expires = new Date();
      expires.setTime(expires.getTime() + days * 24 * 60 * 60 * 1000);

      // 使用 encodeURIComponent 进行编码，以处理特殊字符
      document.cookie = `${name}=${encodeURIComponent(
        value
      )};expires=${expires.toUTCString()};path=/`;
    },
    getCookie(name) {
      const cookieValue = document.cookie.match(
        "(^|;)\\s*" + name + "\\s*=\\s*([^;]+)"
      );
      return cookieValue ? decodeURIComponent(cookieValue.pop()) : "";
    },
  },
};
</script>
<style lang="scss" scoped>
.input-button-wrapper {
  display: flex;
  justify-content: center;
}
.mar-t-b {
  margin: 3rem 0;
}
.box-card {
  width: 98%;
  margin: 1rem auto;

  text-align: center;
}
.p-block {
  margin: 0 auto;
  width: 200px;
  height: 200px;
}
.image {
  width: 100%;
  height: 100%;
}
.image-slot {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background: #f5f7fa;
  color: #909399;
}
.marfom {
  margin: 1rem auto;
}
</style>